import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';

import * as CodeEditorStories from './CodeEditor.stories';

<Meta of={CodeEditorStories} />

# Code Editor

The Code Editor component is a specialized input field that allows users to write and edit code with syntax highlighting, making it easier to work with HTML, JSON, and other code formats. It provides a more user-friendly experience for editing code compared to a standard text area.

## Usage

<Canvas of={CodeEditorStories.Documentation} source={ { code: `
import React, { useState } from "react";
import { CodeEditor } from "@webiny/admin-ui";

const CodeEditorExample = () => {
    const [code, setCode] = useState('{\\n  "name": "example",\\n  "version": "1.0.0"\\n}');
    const [validation, setValidation] = useState({ isValid: true, message: "" });

    const handleChange = (newCode: string) => {
        setCode(newCode);

        // Simple required validation
        if (!newCode || newCode.trim() === "") {
            setValidation({ isValid: false, message: "This field is required" });
        } else {
            setValidation({ isValid: true, message: "" });
        }
    };

    return (
        <CodeEditor
            label="JSON Configuration"
            description="Enter your configuration in JSON format"
            note="Note: Make sure your JSON is valid"
            required={true}
            mode="json"
            theme="github"
            value={code}
            onChange={handleChange}
            validation={validation}
        />
    );
};

export default CodeEditorExample;

` } }
        additionalActions={[
            {
                title: 'Open in GitHub',
                onClick: () => {
                    window.open(
                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/CodeEditor/CodeEditor.tsx',
                        '_blank'
                    );
                },
            }
        ]}
/>

<Controls of={CodeEditorStories.Documentation} exclude={"onChange"}/>

```tsx
import React, { useState } from "react";
import { CodeEditor } from "@webiny/admin-ui";

const CodeEditorExample = () => {
    const [code, setCode] = useState('{\n  "name": "example",\n  "version": "1.0.0"\n}');
    const [validation, setValidation] = useState({ isValid: true, message: "" });

    const handleChange = (newCode: string) => {
        setCode(newCode);

        // Simple required validation
        if (!newCode || newCode.trim() === "") {
            setValidation({ isValid: false, message: "This field is required" });
        } else {
            setValidation({ isValid: true, message: "" });
        }
    };

    return (
        <CodeEditor
            label="JSON Configuration"
            description="Enter your configuration in JSON format"
            note="Note: Make sure your JSON is valid"
            required={true}
            mode="json"
            theme="github"
            value={code}
            onChange={handleChange}
            validation={validation}
        />
    );
};

export default CodeEditorExample;
```
